import Vue from "vue";
import Router from "vue-router";
import Home from "../components/Home.vue";
import Index from "@/views/Index";
import CssIds from "@/components/CssIds";
import CssText from "@/components/CssText";
import CssFont from "@/components/CssFont";
import CssBorder from "@/components/CssBorder";
import CssHolyGrail from "@/components/CssHolyGrail";
import CssFlex from "@/components/CssFlex";
import FlexLayout from "@/views/FlexLayout";
import Layout from "@/views/Layout";
import GridLayout from "@/views/GridLayout";
const About = () => import("@/components/About");
Vue.use(Router);

export default new Router({
  routes: [
    { path: "/", component: Index },
    { path: "/layout1", name: "layout1", component: FlexLayout },
    { path: "/layout2", name: "layout2", component: Layout},
    { path: "/grid", name: "grid", component: GridLayout},
    {
      path: "/index",
      component: Index,
      children: [
        {
          path: "/home",
          name: "home",
          component: Home
        },
        {
          path: "/about",
          name: "about",
          component: About
        },
        {
          path: "/css-text",
          name: "cssText",
          component: CssText
        },
        {
          path: "/css-font",
          name: "cssFont",
          component: CssFont
        },
        {
          path: "/css-border",
          name: "cssBorder",
          component: CssBorder
        },
        {
          path: "/css-layout",
          name: "cssLayout",
          component: CssHolyGrail
        },
        {
          path: "/css-flex-layout",
          name: "cssFlex",
          component: CssFlex
        },
        {
          path: "/id",
          name: "id",
          component: CssIds
        }
      ]
    }
  ]
});
